import React, { useEffect, useState } from 'react'
import './index.css'
import { useNavigate } from 'react-router-dom'

const Index: React.FC = () => {
  const imgs = JSON.parse(localStorage.getItem('userInfor'))
  console.log(imgs.photoImg)
  const navigate = useNavigate()
  const [inputValue, setInputValue] = useState<string>(imgs.username);
  const [isEditing, setIsEditing] = useState<boolean>(false);

  const handelHome = () => {
    navigate('/')
  }
  // const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  //   setInputValue(event.target.value);
  // };

  // const toggleEdit = () => {
  //   setIsEditing(!isEditing);
  //   localStorage.setItem('username', inputValue)
  // };
  // 从本地存储加载初始值
  useEffect(() => {
    const storedValue = localStorage.getItem('inputValue');
    if (storedValue) {
      setInputValue(storedValue);
    }
  }, []);

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };
  //1
  const toggleEdit = () => {
    setIsEditing(!isEditing);
    if (isEditing) {
      // 保存到本地存储
      localStorage.setItem('inputValue', inputValue);
    }
  };

  return (
    <div className='userbox'>
      <div className="usertop">
        <img onClick={handelHome} src="https://www.chuangkit.com/accountcenter/v2/assets/logo.6c2dc745.svg" alt="" />
        <p>个人中心</p>
      </div>
      <div className="usermain">
        <div className='usermain1'>
          <h4>个人信息</h4>
          <div className='userupload'>
            <img src={imgs.photoImg} alt="" />
          </div>
          <div className='username'>
            <p>用户昵称</p>
            <p>{isEditing ? (
              <input
                type="text"
                value={inputValue}
                onChange={handleInputChange}
                onBlur={toggleEdit} // 点击输入框外时结束编辑
              />
            ) : (
              <span onClick={toggleEdit} style={{ cursor: 'pointer' }}>
                {inputValue}
              </span>
            )}</p>
            <p className='gorrr'><button className='UserBtn' onClick={toggleEdit}>{isEditing ? '保存' : '编辑'}</button></p>

          </div>
          <hr />
          <div className='userID'>
            用户ID
          </div>
        </div>
        <div className='usermain2'>
          <h4>账号管理</h4>
          <div>
            <p>手机号</p>
            <p>未绑定</p>
            <p className='gorrr'>绑定</p>
          </div>
          <hr />
          <div>
            <p>邮箱</p>
            <p>未绑定</p>
            <p className='gorrr'>绑定</p>
          </div>
          <hr />
          <div>
            <p>密码</p>
            <p>未绑定</p>
            <p className='gorrr'>设置</p>
          </div>
        </div>
        <div className='usermain3'>
          <h4>第三方账号管理</h4>
          <div>
            <p><img src="" alt="" /></p>
            <p>微信账号</p>
            <p className='gorrr'>绑定</p>
          </div>
          <hr />
          <div>
            <p><img src="" alt="" /></p>
            <p>企业微信账号</p>
            <p className='gorrr'>绑定</p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index